<template>
  <div class="card">
    <ul
      class="card-list nui-scroll"
      :style="{
      background:styles.colorBg,
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',   
      }"
    >
      <li
        :style="{
        color:i==0?styles.colorSelect:styles.colorWord,
        borderBottomColor:i==0?styles.colorSelect:styles.colorWord,
        marginRight:styles.marginRight+'px',
      }"
        v-for="(v,i) in styles.cardList"
      >
        <span>{{v.name}}</span>
        <br />
        <span :style="{background:i==0?styles.colorSelect:styles.colorWord}"></span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "card",
  data() {
    return {};
  },
  props: ["styles"],
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
.card {
  overflow: hidden;
  .card-list {
    width: 370px;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #fff;
    padding: 0 10px;
    > li {
      padding-top: 10px;
      display: inline-block;
      text-align: center;
      color: #999;
      margin-right: 40px;
      > span:nth-of-type(2) {
        display: inline-block;
        width: 40px;
        height: 5px;
        background-color: @mainColor;
        border-radius: 50px;
      }
    }
  }
}
</style>
